<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>RAUM A</title>
    <link rel="stylesheet" href="styleA.css"/>
    <script src="jquery-1.11.2.min.js"></script>
</head>
<body>

<script>
    $(function(){
        $('#cartBtn1').click(function(e){
            $('#cart').animate({left:'-100px'},'swing',function(){
                $('.cartB').fadeIn();
            });
            e.preventDefault();
        });
        $('#cartBtn2').click(function(e){
            $('#cart').animate({left:'-2000px'},'swing',function(){
                $('.cartB').fadeOut();
            });
            e.preventDefault();
        });
        var realWidth = jQuery(document).width();
        $('#brand').width(realWidth - '218');

        $('#brandBtn1').click(function(e){
            $('#brand').fadeIn().animate({left:'101px'},'swing',function(){
                $('.brandB').fadeIn('slow');
            });
            e.preventDefault();
        });
        $('#brandBtn2').click(function(e){
            $('#brand').animate({left:'2000px'},'swing',function(){
                $('.brandB').fadeOut();
            }).fadeOut();
            e.preventDefault();
        });

        $('#vBtn1, #vBtn2').click(function(e){
            $('.visualArea li:first').fadeOut(function(){
                $('.visualArea').append($(this));
            }).next().fadeIn();
            e.preventDefault();
        });
        $('.brandMenu li a').click(function(e){
            var theNum = $(this).parent().index();
            $('.brandMenu2 li').hide().eq(theNum).show();
            e.preventDefault();
        });
        $('#sub').mouseenter(function(){
            $('#nav2').find('div').fadeIn();
        });
        $('#nav2 img, #nav2 div').mouseleave(function(){
            $('#nav2').find('div').fadeOut();
        });
    });
</script>

<div id="wrap">
    <div id="gnb">
        <nav id="nav1">
            <img src="imgA/topMenu.png" alt=""/>
        </nav>
        <nav id="nav2">
            <a href="" id="sub">bag</a>
            <img src="imgA/topMenu3.png" alt=""/>
            <div><img src="imgA/gnbSub.png" class="sub" alt=""/></div>
        </nav>
        <div class="sideMenu1 left">
            <a href="../ifc/indexA.html"><img src="imgA/topL.png" alt=""/></a>
        </div>
        <div class="sideMenu1 right">
            <a href="../ifc/indexA.html"><img src="imgA/topR.png" alt=""/></a>
        </div>
    </div>
    <section id="visual">
        <ul class="visualArea">
            <li class="visual visual1"></li>
            <li class="visual visual2"></li>
        </ul>
        <ul class="btnArea">
            <li><a href="../ifc/indexA.html" id="vBtn1" title="vBtn1">LEFT</a></li>
            <li><a href="../ifc/indexA.html" id="vBtn2" title="vBtn2">RIGHT</a></li>
        </ul>
        <div class="sideMenu2 left">
            <a href="../ifc/indexA.html" id="cartBtn1">CART1</a>
            <img src="imgA/visualSideL.png" alt=""/>
            <div class="cartB">
                <a href="../ifc/indexA.html" id="cartBtn2">CART2</a>
                <img src="imgA/cartB.png" alt=""/>
            </div>
        </div>
        <div class="sideMenu2 right">
            <a href="../ifc/indexA.html" id="brandBtn1">BRAND MAP</a>
            <img src="imgA/visualSideR.png" alt=""/>
            <div class="brandB">
                <a href="../ifc/indexA.html" id="brandBtn2">CART2</a>
                <img src="imgA/brandB.png" alt=""/>
            </div>
        </div>
        <div id="cart">
            <div></div>
            <img src="imgA/cartIn.png" alt=""/>
        </div>
        <div id="brand">
            <ul class="brandMenu">
                <li class="a"><a href="../ifc/indexA.html">&nbsp;</a></li>
                <li class="b"><a href="../ifc/indexA.html">&nbsp;</a></li>
                <li class="c"><a href="../ifc/indexA.html">&nbsp;</a></li>
            </ul>
            <ul class="brandMenu2">
                <li><img src="imgA/brandMap1.png" alt=""/></li>
                <li><img src="imgA/brandMap2.png" alt=""/></li>
                <li><img src="imgA/brandMap3.png" alt=""/></li>
            </ul>
        </div>
    </section>


    <section id="container">
        <img src="imgA/container.png" alt=""/>
    </section>

    <footer id="footer">
        <img src="imgA/footer.png" alt=""/>
    </footer>
</div>

</body>
</html>